<template>
  <div class="box">
      <div class="content"> 
        
        <div class="pos1">
          <img src="@/assets/Snipaste_2022-08-12_14-11-47.jpg" alt="">
          <div class="pos2">
        <button v-if="loginState" @click="logout">退出登录</button>
        <button v-else @click="login">请登录</button>

          </div>
          <div class="pos3"  v-if="loginState">{{userid}}</div>

        </div>
        <div v-for="(itme,i) in 3" :key="i">
        <van-grid class="pos">
  <van-grid-item icon="service-o" text="文字" />
  <van-grid-item icon="gem-o" text="文字" />
  <van-grid-item icon="cart-o" text="文字" />
  <van-grid-item icon="setting-o" text="文字" />
</van-grid>
     </div>

      </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
import { Icon } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Icon);

export default {
  // computed: {
  //   loginState(){
  //     return this.$store.state.loginState
  //   },
  // },
  // 第二种获取状态的方法
  data(){
    return {
    }
  },
  computed: {
    ...mapState({
      loginState: state =>  {
        return state.loginState
      },
      userid:state=>{
          return state.userid.slice(0,9)
      }
    }),
    // 第一种获取 getters
    // listLen(){
    //   return this.$store.getters.len
    // }
    // 第二种获取的方法
  },
  methods: {
    ...mapMutations({
      // key 可以随便起名字，value 是 mutation 中的函数名
      changeLoginState: 'changeLoginState'
    }),
    login(){

      this.$router.push('/login')
    },
    logout(){
      // 退出登录
      localStorage.removeItem('token')
      localStorage.removeItem('userid')
      localStorage.removeItem('loginState')
      this.$store.commit('changeLoginState', false)
      this.$store.commit('citymaps', "")
      
      // this.changeLoginState(false)
      

      console.log(this.$store);
      this.$router.push('/login')
      
    }
  },
}
</script>
<style lang="stylus" scoped>
.pos{
  margin 20px 0
  position relative
}
.pos1 img{
  width 100%
}
.pos2{
  position absolute
  right: 5vw
  top 9vw
  font-size 20px

}
.pos3{
  position absolute
  left: 40vw
  top 11vw
  font-size 13px

}
</style>
